<template>
	<view class="p_over">
		<swiper indicator-dots indicator-color="rgba(255, 255, 255, .4)" indicator-active-color="#fff" autoplay circular
			class="swiper">
			<swiper-item v-for="item in bannerList" :key="item.id">
				<image :src="item.image" mode="aspectFill"></image>
			</swiper-item>
		</swiper>
		<!-- <navigator url="/pages/index/printList" hover-class="none" class="wrapper p_margin_t_48">
			<image src="https://dy.sykj365.com/uploads/mini/wendang@2x.png"></image>
			<view class="content">
				<view class="p_font_44 p_color_fff" style="font-weight: 600;">文档资料打印</view>
				<view class="p_font_32 p_color_fff p_margin_t_12">支持PDF、Word、PPT等样式</view>
			</view>
		</navigator> -->
		<navigator url="/pages/index/printList" hover-class="none" class="wrapper2">
			<image :src="imgHost + '/uploads/mini/index-wendang.png'" mode="widthFix"
				class="p_full" style="height: 260rpx;"></image>
		</navigator>
		<view class="wrapper2 p_flex9">
			<navigator url="/pages/my/agency" hover-class="none" class="w_navig">
				<image src="https://dy.sykj365.com/uploads/mini/lqyouhuiquan@2x.png" mode="widthFix"></image>
			</navigator>
			<view class="wrapper3">
				<navigator url="/pages/index/course" hover-class="none">
					<image src="https://dy.sykj365.com/uploads/mini/dayinjiaocheng@2x.png" mode="widthFix"></image>
				</navigator>
				<navigator url="/pages/my/issue" hover-class="none">
					<image src="https://dy.sykj365.com/uploads/mini/changjianwenti@2x.png" mode="widthFix"></image>
				</navigator>
			</view>
		</view>
		<navigator url="/pages/index/prints" hover-class="none" class="wrapper2">
			<image src="https://dy.sykj365.com/uploads/mini/yijiandaifa@2x.png" mode="widthFix" class="p_full" style="height: 260rpx;">
			</image>
		</navigator>
		<!-- <navigator url="/pages/index/prints" hover-class="none" class="wrapper p_margin_t_48">
			<image src="https://dy.sykj365.com/uploads/mini/wendang1@2x.png"></image>
			<view class="content">
				<view class="p_font_44 p_color_fff" style="font-weight: 600;">一键代发</view>
				<view class="p_font_32 p_color_fff p_margin_t_12">支持PDF、Word、PPT等样式</view>
			</view>
		</navigator> -->
		<!-- <navigator url="/pages/my/agency" hover-class="none" class="wrapper p_margin_t_48">
			<image src="https://dy.sykj365.com/uploads/mini/wendang2@2x.png"></image>
			<view class="content">
				<view class="p_font_44 p_color_fff" style="font-weight: 600;">领券优惠</view>
				<view class="p_font_32 p_color_fff p_margin_t_12">邀请好友获利</view>
			</view>
		</navigator> -->
		<!-- 优惠券 -->
		<coupon :isShow="couponShow" :detail="couponInfo" @getClose="couponShow = false" @getGain="getGain"></coupon>
		<!-- 客服 -->
		<!-- <view class="kefu">
			<image src="https://dy.sykj365.com/uploads/mini/kefu.png" mode="widthFix"></image>
			<button plain open-type="contact"></button>
			<view></view>
		</view> -->
		<van-popup :show="kefuShow" @click-overlay="kefuShow = false">
			<view style="padding: 48rpx;">
				<image :src="kefuUrl" mode="widthFix" class="kefu_img" show-menu-by-longpress></image>
				<view class="p_text_c p_font_26 p_color_7a p_margin_t_24">添加客服二维码</view>
			</view>
		</van-popup>
		<view class="bottom_tip">
			<!-- <text class="tip1">领券</text> -->
			<!-- <text class="tip2">邀请好友奖励3元</text> -->
			<!-- <text class="tip3">无门槛3元券</text> -->
			<text class="tip1">邀请好友奖励3元</text>
			<text class="tip4" @click="getLink">去邀请></text>
		</view>
	</view>
</template>

<script>
	import coupon from './components/coupon.vue';

	export default {
		components: {
			coupon
		},
		data() {
			return {
				bannerList: [],
				couponShow: false,
				couponInfo: {},
				parentOpenid: '',
				kefuShow: false,
				kefuUrl: '',
				imgHost: this.$api.yuming,
			}
		},
		onLoad(e) {
			console.log('accessToken:', e.baiduToken)
			this.getBanner();
			this.getInfo();
			if (e.parentOpenid) this.parentOpenid = e.parentOpenid;
			if (e.baiduToken) {				
				uni.setStorageSync('accessToken', e.baiduToken);
			}
		},
		onShow() {
			let self = this;
			if (!uni.getStorageSync('openid')) {
				getApp().getUserLogin(self.parentOpenid, function(e) {
					if (e.new) {
						self.getTikets();
					}
				});
			}
		},
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: '打印5分/页，全国范围包邮',
				path: '/pages/index/index'
			}
		},
		methods: {
			getBanner() {
				this.$http.post(this.$api.banner).then(res => {
					this.bannerList = res.data;
				})
			},
			// 新人优惠券信息
			getTikets() {
				this.$http.post(this.$api.getNewsTicket).then(res => {
					this.couponShow = true;
					this.couponInfo = res.data;
				})
			},
			getGain() {
				this.$http.post(this.$api.receiveNewsTicket).then(res => {
					this.couponShow = false;
					getApp().getMsg('领取成功', 'success');
				})
			},
			getInfo() {
				this.$http.post(this.$api.priceRemark).then(res => {
					this.kefuUrl = res.data.image;
				})
			},
			getLink() {
				getApp().getNavigateTo('/pages/my/drawboard');
			},
		}
	}
</script>

<style lang="less">
	.swiper {
		height: 400rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.wrapper {
		width: 686rpx;
		height: 320rpx;
		margin: 32rpx;
		position: relative;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.wrapper2 {
		margin: 30rpx 32rpx;
		align-items: stretch;

		.w_navig {
			width: 322rpx;

			image {
				width: 100%;
			}
		}
	}

	.wrapper3 {
		width: 336rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;

		image {
			width: 100%;
		}
	}

	.p_flex_1 {
		width: 343rpx;
		height: 320rpx;
		position: relative;
		border-radius: 16rpx;
		margin: 0 0 0 0;
		overflow: hidden;

		&:last-child {
			margin: 0 0 0 0;
		}

		image {
			width: 100%;
			height: 100%;
		}
	}

	.content {
		top: 48rpx;
		left: 48rpx;
		right: 300rpx;
		bottom: 0;
		position: absolute;
	}

	.flex_content {
		top: 200rpx;
		left: 0;
		right: 0;
		bottom: 0;
		text-align: center;
		position: absolute;
	}

	.kefu {
		bottom: 50rpx;
		right: 0;
		position: fixed;
		width: 120rpx;
		height: 120rpx;

		image {
			width: 100%;
			height: 100%;
			position: relative;
			z-index: 99;
		}

		button,
		view {
			top: 20rpx;
			left: 20rpx;
			right: 20rpx;
			bottom: 20rpx;
			position: absolute;
			border-radius: 50%;
		}

		view {
			background-color: #fff;
		}

		button {
			z-index: 999;
		}
	}

	.kefu_img {
		width: 300rpx;
		height: 300rpx;
	}
	.bottom_tip {
		height: 52rpx;
		line-height: 52rpx;
		padding: 0 20rpx;
		background-color: antiquewhite;
		font-size: 22rpx;
		overflow: hidden;
		.tip1 {
			color: #e80f0f;
			font-weight: bold;
		}
		.tip2 {
			color: #000000;
			font-weight: bold;
			margin-right: 22rpx;
		}
		.tip3 {
			color: #e22424;
			border: 1px solid #eae0bf;
			padding: 2rpx 6rpx;
			border-radius: 3rpx;
		}
		.tip4 {
			color: #e22424;
			font-weight: bold;
			float: right;
		}
	}
</style>
